<template>
  <div class="integral-detail-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onSearch="onSearch"
        @onExport="onExport"
      >
      </c-table-search-form>
      <!-- 表格部分 -->
      <a-tabs v-model="activePaneKey" type="editable-card" @change="onChangePane">
        <a-tab-pane
          v-for="pane in paneList"
          :key="pane.key"
          :tab="pane.title"
          :closable="pane.closable"
        >
          <c-table
            showPagination
            :columns="tableColumns"
            :datas="tableData"
            :loading="loading"
            :paginationDatas="paginationDatas"
            @onPageSizeChange="onPageSizeChange"
            @onShowNumChange="onShowNumChange"
          >
          </c-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "IntegralDetail",
  components: {},
  data() {
    return {
      visible: true,
      form: {
        type: "0"
      },
      formType: "refuse",
      confirmLoading: false,
      tableSearchForm: {
        searchKey: ""
      },
      tableData: [],
      tableColumns: [],
      tableSearchFormData: [
        {
          prop: "data",
          lable: "date",
          type: "date-picker"
        },
        {
          label: "请输入手机号码/积分订单号",
          prop: "searchKey",
          type: "search"
        },
        {
          prop: "exportBtn",
          type: "exportBtn"
        }
      ],
      incomeTableColumns: [
        {
          title: "收入时间",
          dataIndex: "",
          align: "center"
        },
        {
          title: "用户手机号码",
          dataIndex: "",
          align: "center"
        },
        {
          title: "类型",
          dataIndex: "",
          align: "center"
        },
        {
          title: "相关订单号",
          dataIndex: "",
          align: "center"
        },
        {
          title: "获得积分数",
          dataIndex: "",
          align: "center"
        }
      ],
      expendTableColumns: [
        {
          title: "支出时间",
          dataIndex: "",
          align: "center"
        },
        {
          title: "用户手机号码",
          dataIndex: "",
          align: "center"
        },
        {
          title: "类型",
          dataIndex: "",
          align: "center"
        },
        {
          title: "相关订单号",
          dataIndex: "",
          align: "center"
        },
        {
          title: "支出积分数",
          dataIndex: "",
          align: "center"
        },
        {
          title: "兑换物品",
          dataIndex: "",
          align: "center"
        },
        {
          title: "兑换数",
          dataIndex: "",
          align: "center"
        }
      ],
      willTableColumns: [
        {
          title: "下单时间",
          dataIndex: "",
          align: "center"
        },
        {
          title: "用户手机号码",
          dataIndex: "",
          align: "center"
        },
        {
          title: "类型",
          dataIndex: "",
          align: "center"
        },
        {
          title: "相关订单号",
          dataIndex: "",
          align: "center"
        },
        {
          title: "预计可获得积分数",
          dataIndex: "",
          align: "center"
        },
        {
          title: "获得条件",
          dataIndex: "",
          align: "center"
        }
      ],
      activePaneKey: "1",
      paneList: [
        { title: "收入明细", key: "1", closable: false },
        { title: "支出明细", key: "2", closable: false },
        { title: "即将获得明细", key: "3", closable: false }
      ],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.tableColumns = this.incomeTableColumns;
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onSearch() {
      // console.log(12);
    },
    onExport() {
      // console.log(122);
    },
    onPageOnlod() {
      this.loading = true;
      getUserList({
        auditState: this.companyStatus ? Number(this.companyStatus) : "",
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    onChangePane(val) {
      switch (val) {
        case "1":
          this.tableColumns = this.incomeTableColumns;
          break;
        case "2":
          this.tableColumns = this.expendTableColumns;
          break;
        case "3":
          this.tableColumns = this.willTableColumns;
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>
